<template>
  <div>
    <!--    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">-->
    <!--      <el-radio-button :label="false">展开</el-radio-button>-->
    <!--      <el-radio-button :label="true">收起</el-radio-button>-->
    <!--    </el-radio-group>-->
<!--    default-active="1"-->
    <el-menu  class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
             :collapse="isCollapse">
      <router-link to="/home">
        <el-menu-item index="1" >
          <i class="el-icon-data-analysis"></i>
          <span slot="title">首页</span>
        </el-menu-item>
      </router-link>
      <router-link to="/payout">
          <el-menu-item index="2" route="payout">
          <i class="el-icon-fork-spoon"></i>
          <span slot="title">支出</span>
        </el-menu-item>
      </router-link>
      <router-link to="/income">
          <el-menu-item index="3">
            <i class="el-icon-coin"></i>
            <span slot="title">收入</span>
          </el-menu-item>
      </router-link>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-user"></i>
          <span slot="title">用户</span>
        </template>
        <el-menu-item-group>
<!--          <span slot="title">  <i class="el-icon-user-solid"></i>{{ userName }}</span>-->
          <el-menu-item index="4-1" ><i class="el-icon-user-solid"></i>{{ userName }}</el-menu-item>
          <el-menu-item index="4-2" @click="logout">退出</el-menu-item>
          <router-link to="/register" class="router-link">
            <el-menu-item index="4-3">注册</el-menu-item>
          </router-link>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Navigation",
  data() {
    return {
      isCollapse: true,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    async logout(){
      console.log("logout")
      let id=this.$store.state.user.user.id;
      // console.log("id:",id);
      await this.$API.default.user.updateLoginTime(id);
      this.$store.dispatch("logout");
      this.$message({
        type:'success',
        message:'退出登录',
        duration:2000,
      })
      this.$router.push({path:'/login'});
    }
  },
  computed:{
    userName(){
      const userInfo=this.$store.state.user.user;
      return userInfo.name||'未登录';
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width:100px;
  min-height: 400px;
}
.router-link{
  text-decoration: none;
  color: white;
}
</style>